<template>
    <view>
        <view>
            <view class = "d"></view>
            <text class = "word">一次性可上传1个附件进行审核</text>
        </view>
        <view>
            <view class = "d"></view>
            <text class = "word">活动总结最多上传10个附件</text>
        </view>
        <view>
            <view class = "d"></view>
            <text class = "word">审核通过的附件不可删除，请联系管理员删除</text>
        </view>
        <uni-card :is-shadow="false" class = "shang">
            <button class = "shc" @click = "chooseFiles">
                <text class = "scwo">
                    上传文件
                </text>
            </button>
            <view class = "tishi">请上传文件，大小不超过50M，多文件请打包上传</view>
            <view v-for = "(item,index) in myObject.ggo" :key = "index">
                <uni-card> class = "ll">{{item}}</uni-card>
                <view class = "x" @click = "removeImage">
                    <text>x</text>
                </view>
            </view>
        </uni-card>
        <button class = "bn"  @click = "go">
            <text class = "wo" >提交审核</text>
        </button>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import {ref} from 'vue'
let myObject = ref({
    vv: [],
    ggo: []
});
let  chooseFiles = function ()
{
    uni.chooseFile({
        count: 1, // 最多可以选择的文件数量
        type: 'all', // 'all' 表示不限制文件类型，也可以指定为 'image'、'video'、'file' 等
        success: (res) => {
            // 清除之前的文件名称
            myObject.value.ggo = [];
            // 遍历选择的文件列表
            res.tempFiles.forEach(file => {
                // 获取文件名（这里假设文件名是路径的最后一个部分）
                // 注意：对于某些特殊路径或命名方式，可能需要更复杂的解析
                let fileName = file.path.split('/').pop();
                // 将文件名添加到数组中
                myObject.value.ggo.push(fileName);
            });
            // 此时fileNames数组中存储了所有选中文件的名称
            // 你可以在这里进行后续操作，如上传文件等
        },

        fail: (err) => {
            // 处理选择文件失败的情况
            console.error('文件选择失败:', err);
        }
    });
    console.log("ge" + myObject.ggo)
}
let go = function(){
    uni.navigateTo({
        url:`../audit/Creat?fileP=${encodeURIComponent(JSON.stringify(myObject))}`,
    })
}
let removeImage = function(index) {
    myObject.value.ggo.splice(index, 1);
}

onLoad((option)=>{
    console.info(1111)
    const image = JSON.parse(decodeURIComponent(option.ima))
    console.log("image" + image)
    myObject.value.vv = image
    console.log("re" + myObject.ff)
})

</script>

<style scoped>
.d{
    position: relative;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #166AFF;
    left:12px;
    top:25px
}
.word{
    position:relative;
    width: 164px;
    height: 17px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #6E6E6E;
    top:10px;
    left:20px
}
.shang{
    position:relative;
    height: 217px;
    background: #FFFFFF;
    box-shadow: 0 2px 5px 0 #E2E4EB;
    border-radius: 10px;
    top:5px;
}
.shc{
    position: relative;
    width: 100px;
    height: 30px;
    background: #166AFF;
    border-radius: 15px;
    top:12px
}
.scwo{
    position: relative;
    width: 48px;
    height: 100px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    top: -8px
}
.anniu{
    height: 1000px !important;
}
.tishi{
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #999DA3;
    margin-top: 20px;
}
.bn{
    margin: 10px;
    height: 45px;
    background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
    border-radius: 6px;
    margin-top: 35px;
}
.wo{
    width: 72px;
    height: 25px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
}
.ll{
    height: 20px;
    background: #FFFFFF;
    box-shadow: 0 2px 5px 0 #E2E4EB;
    border-radius: 20px;
}
.x{
    position:relative;
    top:-60px;
    left:290px
}
</style>